<template>
  <div class="search">
    <span>项目状态</span>
    <el-input class="input" @keydown.enter="searchHandler" v-model="searchInfo" size="large"
              placeholder="请输入要搜索的信息"></el-input>
    <el-button @click="searchHandler" class="button" size="large" type="primary" plain>搜索</el-button>
    <el-button @click="addHandler" class="button" size="large" type="primary" plain>添加</el-button>
  </div>
  <el-table :data="projectInfo.list" :header-cell-style="headerClass" style="width: 100%">
    <el-table-column prop="name" label="项目名称" width="180"/>
    <el-table-column prop="number" label="项目编码" width="120"/>
    <el-table-column prop="money" label="项目金额" width="120"/>
    <el-table-column prop="address" label="项目地址" width="150"/>
    <el-table-column prop="duration" label="项目工期(约)" width="120"/>
    <el-table-column :formatter="formatStartTime" prop="startTime" label="开工时间"
                     width="150"/>
    <el-table-column :formatter="formatEndTime" prop="endTime" label="终止时间"
                     width="150"/>
    <el-table-column prop="quantity" label="隧道数量" width="120"/>
    <el-table-column prop="status" label="项目状态" width="120">
      <template #default="scope">
        <el-tag :type="scope.row.status==='1'?'':'success'">{{ statusHandle(scope.row.status) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip prop="remark" label="备注">
      <template #default="scope">
        <div v-html="scope.row.remark"></div>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="135">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <el-pagination :default-page-size="projectInfo.defaultPageSize" @current-change="handleCurrentChange" background
                   layout="prev, pager, next,jumper" :total="projectInfo.total"/>
  </div>
  <el-dialog title="添加隧道信息" width="80%" v-model="dialogAddVisible" center>
    <el-form inline="true" :model="addInfo" label-width="80px" class="add-form">
      <div class="form-row">
        <el-form-item label="项目名称" class="form-item-half">
          <el-input v-model="addInfo.name" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="项目编码" class="form-item-half">
          <el-input v-model="addInfo.number" placeholder="请输入项目编码"></el-input>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="项目金额" class="form-item-half">
          <el-input v-model="addInfo.money" placeholder="请输入项目金额"></el-input>
        </el-form-item>
        <el-form-item label="项目地址" class="form-item-half">
          <el-input v-model="addInfo.address" placeholder="请输入项目地址"></el-input>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="项目工期" class="form-item-half">
          <el-input v-model="addInfo.duration" placeholder="请输入项目工期"></el-input>
        </el-form-item>
        <el-form-item label="开工时间" class="form-item-half">
          <el-date-picker value-format="x" v-model="addInfo.startTime" type="date" placeholder="请输入开工时间"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="终止时间" class="form-item-half">
          <el-date-picker value-format="x" v-model="addInfo.endTime" type="date" placeholder="请输入终止时间"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="隧道数量" class="form-item-half">
          <el-input v-model="addInfo.quantity" placeholder="请输入隧道数量"></el-input>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="项目状态" class="form-item-full">
          <el-input v-model="addInfo.status" placeholder="'1'施工中 - '0'已完成"></el-input>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="项目备注" class="form-item-full">
          <TinymceEditor
              :options="options"
              @onDataEvent="getInfoEditorHand">
          </TinymceEditor>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取消</el-button>
        <el-button type="primary" @click="sureHandler">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
<!--  destroy-on-close关闭对话框直接销毁对话框-->
  <el-dialog destroy-on-close title="编辑隧道信息" width="80%" v-model="dialogEditVisible" center>
    <el-form inline="true" :model="editFormInfo"  label-width="80px" class="add-form">
      <div class="form-row">
        <el-form-item label="项目名称">
          <el-input v-model="editFormInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="项目编码" class="form-item-half">
          <el-input v-model="editFormInfo.number"></el-input>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="项目金额" class="form-item-half">
          <el-input v-model="editFormInfo.money"></el-input>
        </el-form-item>
        <el-form-item label="项目地址" class="form-item-half">
          <el-input v-model="editFormInfo.address"></el-input>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="项目工期" class="form-item-half">
          <el-input v-model="editFormInfo.duration"></el-input>
        </el-form-item>
        <el-form-item label="开工时间" class="form-item-half">
          <el-date-picker value-format="x" v-model="editFormInfo.startTime" type="date"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="终止时间" class="form-item-half">
          <el-date-picker value-format="x" v-model="editFormInfo.endTime" type="date"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="隧道数量" class="form-item-half">
          <el-input v-model="editFormInfo.quantity"></el-input>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="项目状态" class="form-item-full">
          <el-input v-model="editFormInfo.status"></el-input>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="项目备注" class="form-item-full">
           <TinymceEditor
               :editorID="editorId"
               :remark="editFormInfo.remark"
               :options="options"
               @onDataEvent="updateEditEditorHand">
           </TinymceEditor>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="sureEditHandler">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import api from '@/api/index.js'
import {onMounted, reactive, ref} from "vue";
import {detaFormater} from '@/util/utils.js'
import TinymceEditor from '@/components/TinymceEditor/index.vue'
import {ElMessage, ElMessageBox} from 'element-plus'
//定义修改数据的唯一id
const editorId = ref(null)
const projectInfo = reactive({
  list: [],
  total: 0,
  defaultPageSize: 15
})
//新增弹窗
const addInfo = reactive({
  name: '',
  number: '',
  money: '',
  address: '',
  duration: '',
  startTime: '',
  endTime: '',
  quantity: '',
  status: '',
  remark: ''
})
//编辑弹窗
const editFormInfo = reactive({
  name: '',
  number: '',
  money: '',
  address: '',
  duration: '',
  startTime: '',
  endTime: '',
  quantity: '',
  status: '',
  remark: ''
})
onMounted(() => {
  http(1)
  api.getTotal().then(res => {
    if (res.status === 200) {
      projectInfo.total = res.result[0]['count(*)']
    } else {
      projectInfo.total = 0
    }
  })
})
//搜搜初始化状态
const searchInfo = ref('')

//添加对话框控制器
const dialogAddVisible = ref(false)
//编辑对话框控制器
const dialogEditVisible = ref(false)
/**
 *
 * @param status
 * @returns {string}
 */
const statusHandle = (status) => {
  return status === '1' ? '施工中' : '已完结'
}

const headerClass = () => {
  return {
    background: '#dcdcdc',
    color: '#999',
    fontWeight: 700
  }
}
const http = (page) => {
  api.projectInfo({page}).then(res => {
    if (res.status === 200) {
      projectInfo.list = res.result
    }
  })
}
//表格编辑按钮
const handleEdit = (row) => {
  // 先设置 editorId，然后加载数据，最后打开弹窗
  editorId.value = row.id
  api.getUpdateProject({id: row.id}).then(res => {
    if (res.status === 200) {
      editFormInfo.name = res.result.name
      editFormInfo.number = res.result.number
      editFormInfo.money = res.result.money
      editFormInfo.address = res.result.address
      editFormInfo.duration = res.result.duration
      editFormInfo.startTime = Number(res.result.startTime)
      editFormInfo.endTime = Number(res.result.endTime)
      editFormInfo.quantity = res.result.quantity
      editFormInfo.status = res.result.status
      editFormInfo.remark = res.result.remark
      // 数据加载完成后再打开弹窗
      dialogEditVisible.value = true
    }
  })
}
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '确定要删除当前数据吗?',
      '删除操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        api.getDelProject({id: row.id}).then(res => {
          console.log(res)
          if (res.status === 200) {
            ElMessage({
              type: 'success',
              message: '已经删除',
            })
            http(1)
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

}
const formatStartTime = (row, column, cellValue) => {
  return detaFormater(Number(cellValue))
}

const formatEndTime = (row, column, cellValue) => {
  return detaFormater(Number(cellValue))
}
const handleCurrentChange = (val) => {
  http(val)
}
const searchHandler = () => {
  api.getSearch({search: searchInfo.value}).then(res => {
    if (res.status === 200) {
      projectInfo.list = res.result
    } else {
      projectInfo.list = []
    }
  })
}
//添加弹窗事件
const addHandler = () => {
  dialogAddVisible.value = true
}

const sureHandler = () => {
  api.getAddProject({
    name: addInfo.name,
    number: addInfo.number,
    money: addInfo.money,
    address: addInfo.address,
    duration: addInfo.duration,
    startTime: addInfo.startTime,
    endTime: addInfo.endTime,
    quantity: addInfo.quantity,
    status: addInfo.status,
    remark: addInfo.remark
  }).then(res => {
    if (res.status === 200) {
      dialogAddVisible.value = false
      http(1)
    } else {
      ElMessage.error(res.msg || '添加失败')
    }
  })
}
/**
 * 获取富文本编辑器内容
 */
const options = {
  width: "100%",
  height: "300px"
}
const getInfoEditorHand = (data) => {
  addInfo.remark = data
}
//修改提交富文本编辑器内容
const updateEditEditorHand = (data) => {
  editFormInfo.remark = data
}
/**
 * 编辑弹窗事件
 */
const sureEditHandler = () => {
  api.getUpdate(editorId.value, {
    name: editFormInfo.name,
    number: editFormInfo.number,
    money: editFormInfo.money,
    address: editFormInfo.address,
    duration: editFormInfo.duration,
    startTime: editFormInfo.startTime,
    endTime: editFormInfo.endTime,
    quantity: editFormInfo.quantity,
    status: editFormInfo.status,
    remark: editFormInfo.remark
  }).then(res => {
    if(res.status===200){
      dialogEditVisible.value=false
      http(1)
    }
  })
}
</script>


<style scoped lang="scss">
.search {
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
  background-color: #fff;
  width: 100%;

  span {
    font-weight: 700;
  }

  .input {
    width: 300px;
  }
}

.page {
  position: fixed;
  right: 10px;
  bottom: 100px;
}

.add-form {
  .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;

    .form-item-half {
      flex: 1;
      margin-bottom: 0;
    }

    .form-item-full {
      width: 100%;
      margin-bottom: 0;
    }
  }

  .el-form-item {
    margin-bottom: 0;
  }
}
</style>